<template>
    <div class="newAddStudent">
        <div class="invite-sub">
            <img class="invite-logo" src="../../static/image/icon-title.png" alt="">
            <span class="inviteSearch">
            <input type="text" placeholder="搜索">
            <img src="../../static/image/sousuo.png" alt="">
            </span>
        </div>
        <!-- 搜索栏 end-->
        <div class="pageDetail">
            <div class="titleAll ">
                <div class="public-header">
                    <div class="public-header-ch">新增学员</div>
                    <div class="public-header-en">INCREASE&nbsp;&nbsp;STUDENT</div>
                    <div class="public-header-line"></div>
                </div>
            </div>
        </div>

        <div class="studentCentre">
            <div class="studentbutton">
                <div class="studentbuttononce" @click="dialogVisible = true">
                    <img src="../../static/image/pl.png" alt="">
                    <span>批量导入学员账号</span>
                </div>                
            </div>
            <div class="teamBigBox">
                <div class="teamBox" v-for="lists in iteams ">
                    <table>
                        <thead>
                            <tr>
                                <th></th>
                                <th>姓名</th>
                                <th>手机号</th>
                                <th>性别</th>
                                <th>子公司/部门</th>
                                <th>职位</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="list in lists.contant" :key="list.id">
                                <td>{{list.student}}</td>
                                <td><input type="text" v-model="list.name"></td>
                                <td>
                                    <input type="text" v-model="list.mobile">
                                    <!-- <div class="emptyTip2"></div> -->
                                </td>
                                <td>
                                    <select v-model="list.sex"  placeholder="男">
                                        <option label="男" value="0"></option>
                                        <option label="女" value="1"></option>
                                    </select>
                                </td>
                                <td><input type="text" v-model="list.department" ></td>
                                <td><input type="text" v-model="list.position"></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="surebutton"><span>确认</span></div>

        </div>

        <!-- 批量导入学员账号 dialog -->
        <el-dialog
            title=""
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose" class="batchImportDialog">
            <div class="uploadContent">
                <div class="uploadTitle">
                    <h3>批量导入学员账号</h3>
                    <div></div>
                </div>
                <div class="uploadLine">
                    <h4><i class="red">*</i>导入学员账号</h4>
                    <div class="file">
                        <span class="upload-word">上传文件</span>
                        <el-upload
                            class="upload-demo"
                            action=""
                        >
                            <el-button size="small" type="primary">
                                <img class="upload" src="../../static/image/shangchuan.png" alt="">
                                <span class="upword">上传</span>
                            </el-button>
                            
                        </el-upload>
                    </div>
                    <div class="promptContent">
                        <p>请依照下列指示操作：</p>
                        <p>1.点击 <a href="http://p92g708lv.bkt.clouddn.com/%E5%88%9B%E5%BB%BA%E9%82%80%E8%AF%B7%E8%AF%BE%E7%A8%8B%E5%AD%A6%E5%91%98%E5%AF%BC%E5%85%A5%E6%A8%A1%E6%9D%BF.xlsx">下载批量导入模版</a>
                        </p> 
                        <p>2. 编辑批量导入模版</p> 
                        <p>3. 上传编辑过后的批量导入模板</p>
                    </div>
                </div>                       
            </div>
            <span slot="footer" class="dialog-footer">
                <!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
                <el-button type="primary" @click="importCreatCourse()">创建课程</el-button>
            </span>
        </el-dialog>

    </div>
</template>
<script>
export default {
    data(){
        return{
            iteams:[
                {
                    contant:[
                        {student:'学员1',name:'董君竹',mobile:'13697158556',sex:'1',department:'后勤管理部',position:'后勤主管'},
                        {student:'学员2',name:'董君竹',mobile:'13697158556',sex:'1',department:'后勤管理部',position:'后勤主管'},
                        {student:'学员3',name:'董君竹',mobile:'13697158556',sex:'1',department:'后勤管理部',position:'后勤主管'},
                    ],

                },
                {
                    contant:[
                        {student:'学员1',name:'董君竹',mobile:'13697158556',sex:'1',department:'后勤管理部',position:'后勤主管'},
                        {student:'学员2',name:'董君竹',mobile:'13697158556',sex:'1',department:'后勤管理部',position:'后勤主管'},
                        {student:'学员3',name:'董君竹',mobile:'13697158556',sex:'1',department:'后勤管理部',position:'后勤主管'},
                    ],

                },
                {
                    contant:[
                        {student:'学员1',name:'董君竹',mobile:'13697158556',sex:'1',department:'后勤管理部',position:'后勤主管'},
                        {student:'学员2',name:'董君竹',mobile:'13697158556',sex:'1',department:'后勤管理部',position:'后勤主管'},
                        {student:'学员3',name:'董君竹',mobile:'13697158556',sex:'1',department:'后勤管理部',position:'后勤主管'},
                    ],

                }
            ],
             // 批量导入弹窗
                dialogVisible:false,

        }
    }
}
</script>

